<template>
  <cus-form ref="formRef" :nodes="nodes" width="422px" />

  <div class="file-upload-content">
    <el-upload
      drag
      :action="action"
      accept=".pdf,doc,.docx"
      :file-list="fileList"
      ref="uploadRef"
      :on-success="uploadSuccess"
      :on-remove="fileRemove"
    >
      <div class="upload-content">
        <i class="el-icon-upload" />
        <div>将文件拖到此处，或<span>点击上传</span></div>
        <p>支持扩展名：.doc、.docx、.pdf</p>
      </div>
    </el-upload>
  </div>
</template>
<script lang="ts">
import { ref, Ref, PropType } from 'vue';
import $ from '$';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';

export default {
  props: {
    files: {
      type: Array as PropType<File[]>,
      default: () => []
    }
  },
  setup(props) {
    let areaData:[][] = [];
    let store = useStore();
    let formRef = ref();
    let uploadRef = ref();
    let action = `${import.meta.env.VITE_APP_BASE_URL}/system/file/uploadFile`;

    let userId = store.getters.userInfo.user.id;
    let subjectDefault = store.getters.subject.code;

    let nodes: Ref<any[]> = ref([
      {
        label: "学科",
        key: "subjectId",
        type: "cascader",
        url: "/permission/user/userDataSubjects",
        params: { userId },
        default: subjectDefault,
        rule: { required: true, message: "请选择学科" },
        valueKey: 'code',
        change: (v) => subjectChange(v)
      },
      {
        label: "年级",
        key: "gradeId",
        type: "select",
        options: [],
        rule: { message: "请选择年级" },
      },
      {
        label: "年份",
        key: "year",
        type: "select",
        options: [],
        rule: { message: "请选择年份" },
      },
      {
        label: "来源",
        key: "source",
        type: "select",
        options: [],
        rule: { message: "请选择来源" },
      },
      {
        label: '省市区',
        key: 'provinceCity',
        type: 'cascader',
        lazy: true,
        labelKey: 'name',
        valueKey: 'id',
        checkStrictly: true,
        lazyLoad: ({ data }, resolve) => {
          $.http.post('/system/area/queryByParentId', { parentId: data.id ? data.id : null }).then(res => {
            if (!data.id) areaData[0] = res.json;
            else if (res.json.every(i => i.leaf)) areaData[2] = res.json;
            else areaData[1] = res.json;
            resolve(res.json);
          })
        },
        change: (e) => {
          $.http.post('/admin/publicSchool/queryAll', { provinceId: e[0], cityId: e[1], areaId: e[2] }).then(res => {
            let names = e.map((i, idx) => (areaData[idx].find((j: any) => j.id === i) as any).name);
            [formRef.value.formGroup.provinceName, formRef.value.formGroup.cityName, formRef.value.formGroup.countyName = null] = names;
            [formRef.value.formGroup.provinceId, formRef.value.formGroup.cityId, formRef.value.formGroup.county = null] = e;
            nodes.value[5].options = res.json;
            formRef.value.formGroup.schoolId && (formRef.value.formGroup.schoolId = null);
          })
        }
      },
      {
        label: '公立校',
        key: 'schoolId',
        type: 'select',
        labelKey: 'name',
        valueKey: 'id',
        options: []
      },
      {
        label: '共享范围',
        key: 'isPublic',
        type: 'radio',
        default: 0,
        options: [ { name: '我的试卷', id: 0 },{ name: '公共试卷', id: 1 } ]
      }
    ]);
    $.http.post('/system/dictionary/queryDictByCodes', { typeCodesStr: 'QUES_SOURCE' }).then(res => nodes.value[3].options = res.json['QUES_SOURCE']);
    const subjectChange = (v) => {
      $.http.post('/permission/user/userDataRules', { userId, subjectCode: v }).then((res: any) => {
        nodes.value[1].options = res.json.grades;
        nodes.value[2].options = res.json.years;
        formRef.value.formGroup.gradeId = null;
        formRef.value.formGroup.year = null;
        setTimeout(() => formRef.value.formRef.clearValidate() );
      })
    }
    subjectChange(subjectDefault)

    let fileList: Ref<any[]> = ref([]);
    Promise.all(props.files.map(file => {
      let formdata = new FormData();
      formdata.append('file', file);
      return $.http.upload('/system/file/uploadFile', formdata);
    })).then((list: any[]) => {
      fileList.value = list.map(res => ({ ...res.json, name: res.json.oriFilename, url: res.json.filePath }))
    });

    const uploadSuccess = (res) => {
      fileList.value.push({ ...res.json, name: res.json.oriFilename, url: res.json.filePath });
    };
    const fileRemove = (file) => {
      fileList.value.splice(fileList.value.findIndex(f => file.filePath === f.filePath), 1);
    };

    const save = (resolve, reject) => {
      formRef.value.validate(valid => {
        if (valid) {
          if (fileList.value.length < 1) { reject(ElMessage.warning('请上传文件！')); return; }
          let parasm = { ...valid, papers: fileList.value, subjectId: Array.isArray(valid.subjectId) ? valid.subjectId[1] : valid.subjectId };
          $.http.json('/tiku/paper/batchSavePaper', parasm).then(res => {
            if (res.result) {
              ElMessage.success('上传试卷成功~！');
              resolve(true)
            } else {
              ElMessage.warning(res.msg);
              reject()
            }
          })
        } else {
          reject()
        }
      });
    };

    return { action, nodes, save, formRef, uploadRef, fileList, uploadSuccess, fileRemove };
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-upload) {
  width: 100%;
  .el-upload-dragger {
    width: 100%;
    height: 160px;
    background: none;
  }
}
.file-upload-content {
  :deep(.el-upload-dragger) {
    background: #f6f7f9;
  }
}
.upload-content {
  i {
    margin-top: 24px;
    color: #72b22a;
  }
  div {
    color: #1a2633;
    margin-bottom: 8px;
    span {
      color: #72b22a;
    }
  }
  p {
    color: #999;
    font-size: 12px;
  }
}
.paper-mode {
  display: flex;
  margin-bottom: 22px;
  span {
    width: 80px;
    display: block;
    text-align: right;
    color: rgb(96, 98, 102);
    line-height: 40px;
    padding: 0px 12px 0px 0px;
    white-space: nowrap;
    &::before {
      content: "*";
      color: rgb(245, 108, 108);
      margin-right: 4px;
    }
  }
  .mode-radio-group {
    flex: auto;
    display: flex;
    .r-g-radio {
      flex: 1;
      padding: 25px;
      height: 140px;
      border-radius: 6px;
      border-width: 3px;
      border-style: solid;
      cursor: pointer;
      position: relative;
      transition: all 0.1s ease;
      i {
        color: #fff;
        font-size: 16px;
        position: absolute;
        top: 5px;
        right: 3px;
        opacity: 0;
        transition: all 0.1s ease;
      }
      &.active::before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 20px;
        border-style: solid;
        border-bottom-color: rgba($color: #000000, $alpha: 0);
        border-left-color: rgba($color: #000000, $alpha: 0);
        position: absolute;
        top: 0;
        right: 0;
        opacity: 0;
        transition: all 0.1s ease;
      }
      &.active {
        i,
        &::before {
          opacity: 1;
        }
      }
      &:first-child {
        margin-right: 20px;
        border-color: rgba(255, 132, 33, 0.1);
        background: rgba(255, 132, 33, 0.1);
        &.active {
          border-color: rgba(255, 132, 33, 1);
          &::before {
            display: block;
            border-top-color: #ff8421;
            border-right-color: #ff8421;
          }
        }
      }
      &:last-child {
        border-color: rgba(69, 90, 247, 0.1);
        background: rgba(69, 90, 247, 0.1);
        &.active {
          border-color: rgba(69, 90, 247, 1);
          &::before {
            display: block;
            border-top-color: #455af7;
            border-right-color: #455af7;
          }
        }
      }
      h4 {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 10px;
      }
      p {
        color: #77808d;
      }
    }
  }
}
</style>
